<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/vue.js"></script>
    <title>人员列表</title>
</head>
<body>
    <div id="root">
        <!-- 
            面试题:react和vue的key有什么作用，key的内部原理
            1.虚拟DOM中key的作用:
                key是虚拟DOM对象的标识，当数据发生变化事，Vue会根据新数据生成新的虚拟DOM
                随后Vue进行新虚拟DOM和旧虚拟DOM的差异比较，比较规则如下
            2.对比数据
                1.旧虚拟DOM中找到了与新虚拟DOM相同的key
                    1).若虚拟DOM中内容没变，直接使用之前的真实DOM
                    2).若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
                2.旧虚拟DOM中未找到和新虚拟DOM相同的key
                    创建新的真实DOM，随后渲染到页面
            3.用index作为key会引发的问题
                1.若对数据进行：逆序添加，逆序删除等破坏顺序操作:
                    会产生没有必要的真实DOM更新 ==》界面效果没问题，但效率低
                2.如果结构中还包含输入类的DOM
                    会产生错误DOM更新 ===》界面有问题
            4.开发中如何选择key
                1.最后使用每条数据的唯一标识作为key,如id,收集号，身份证号，学号等唯一值
                2.如果不存在对数据的逆序添加，逆序删除等破坏性顺序操作，仅用于渲染列表用于展示
                使用index作为key是没有问题的
        -->
        <h2>人员列表</h2>
        <!-- 遍历数组 -->
        <ul >
            <li v-for="(person,index) in persons" :key="person.id">
                {{person.name}}-{{person.age}}
                <input type="text">
            </li>
            
        </ul>
        <button @click.once="addPerson">添加人员</button>
        
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#root',
        data: {
            persons:[
                {
                    id:'001',
                    name: '张三',
                    age: 20
                },
                { 
                    id:'002',
                    name:'李四',
                    age:18
                },
                {
                     id:'003',
                    name:"王五",
                    age:25
                }
            ]
        },
        methods: {
            addPerson: function() {
                const person = {
                    id: '004',
                    name: '老刘',
                    age:28
                };
                this.persons.unshift(person);
            }
        }
    })          
</script>
</html>